import loginCss from './login.module.scss'
import './loginSet.less'
import React, {useEffect, useMemo, useState} from "react";
import Particles, {initParticlesEngine} from "@tsparticles/react";
import cardBg from '../../assets/image/card-bg.svg'
import {
    type Container,
    type ISourceOptions,
    MoveDirection,
    OutMode,
} from "@tsparticles/engine";
// import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import {loadSlim} from "@tsparticles/slim";
import {Button, Card, Checkbox, ColorPicker, Flex, Form, Input, Space} from "antd";
import {LockOutlined, UserOutlined} from "@ant-design/icons";
import router from "../../router";
import {Link, Route, useRoutes, useNavigate} from "react-router-dom";
import path from "path";
import {log} from "util";
import {types} from "sass";
import Color = types.Color; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.

const Login = () => {
    const [init, setInit] = useState(false);
    // 设置背景色
    const [bgColor, setBgColor] = useState('#7FB0F5');

    // this should be run only once per application lifetime


    const particlesLoaded = async (container?: Container): Promise<void> => {
        console.log(container);
    };
    // 背景
    const [options, setOptions] = useState({
        background: {
            color: {
                value: "#0d47a1",
                // value: bgColor,
            },
        },
        fpsLimit: 120,
        interactivity: {
            events: {
                onClick: {
                    enable: true,
                    mode: "push",
                },
                onHover: {
                    enable: true,
                    mode: "repulse",
                },
            },
            modes: {
                push: {
                    quantity: 4,
                },
                repulse: {
                    distance: 200,
                    duration: 0.4,
                },
            },
        },
        particles: {
            color: {
                value: "#ffffff",
            },
            links: {
                color: "#ffffff",
                distance: 150,
                enable: true,
                opacity: 0.5,
                width: 1,
            },
            move: {
                direction: MoveDirection.none,
                enable: true,
                outModes: {
                    default: OutMode.out,
                },
                random: false,
                speed: 3,
                straight: false,
            },
            number: {
                density: {
                    enable: true,
                },
                value: 80,
            },
            opacity: {
                value: 0.5,
            },
            shape: {
                type: "circle",
            },
            size: {
                value: {min: 1, max: 5},
            },
        },
        detectRetina: true,
    });
    useEffect(() => {

        initParticlesEngine(async (engine) => {
            // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
            // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
            // starting from v2 you can add only the features you need reducing the bundle size
            //await loadAll(engine);
            //await loadFull(engine);
            await loadSlim(engine);
            //await loadBasic(engine);

        }).then(() => {
            setInit(true);

        });
    }, [bgColor]);
    // 背景颜色选择器
    const onChange = (value: Color, css: string) => {
        setOptions({
            ...options,
            background: {
                color: css
            }
        })
        console.log('==')
        console.log(options)
    }
    // 跳转页面
    const navigate = useNavigate();
    const onFinish = (values: any) => {
        navigate('/index')
    };
    // 登录表单数据
    const FormData = useState({
        username: 'kjp',
        password: '123456'
    })

    // 密码框
    const [passwordVisible, setPasswordVisible] = React.useState(false);
    if (init) {
        return (
            <>
                <Particles
                    id="tsparticles"
                    particlesLoaded={particlesLoaded}
                    options={options}
                />
                <div className={loginCss.setBgColor}>
                    修改背景色<ColorPicker defaultValue="#1677ff" onChange={onChange}/>
                </div>
                <div className={loginCss.login}>
                    <div className={loginCss.loginForm}>
                        <img src={cardBg} style={{width: '600px', height: '300px'}}/>
                        <div>
                            <h2 className={loginCss.formTitle}>React 管理系统</h2>
                            <div>
                                <Form
                                    name="login"
                                    initialValues={{remember: true}}
                                    style={{maxWidth: 360}}
                                    onFinish={onFinish}
                                >
                                    <Form.Item
                                        name="username"
                                        rules={[{required: true, message: 'Please input your Username!'}]}
                                        className={loginCss.loginFormItem}
                                    >
                                        <Input prefix={<UserOutlined/>} placeholder="Username" className={'setBg'}/>
                                    </Form.Item>
                                    <Form.Item
                                        name="FormData.password"
                                        rules={[{required: true, message: '请输入密码'}]}
                                    >
                                        <Input.Password prefix={<LockOutlined/>} type="password" className={'setBg'}
                                                        placeholder="Password"
                                                        visibilityToggle={{
                                                            visible: passwordVisible,
                                                            onVisibleChange: setPasswordVisible
                                                        }}
                                        />
                                    </Form.Item>
                                    <Form.Item>
                                        <Flex justify="space-between" align="center">
                                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                                <Checkbox>Remember me</Checkbox>
                                            </Form.Item>
                                            <a href="">Forgot password</a>
                                        </Flex>
                                    </Form.Item>

                                    <Form.Item>
                                        <Button block type="primary" htmlType="submit">
                                            Log in
                                        </Button>
                                        or <a href="">Register now!</a>
                                    </Form.Item>
                                </Form>
                            </div>
                        </div>
                    </div>


                </div>

            </>
        );
    }

    return <></>;
};

export default Login
